<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="username" value="">
    <input type="text" name="" id="age" value="">

    <!-- 给按钮添加了一个点击事件 -->
    <button onclick="fn()">按钮</button>
    <button id="btn2">按钮2</button>
    <div> 计算结果：<span id="res"></span></div>


    <script>
        /*
            1- 查询到 dom
                querySelector
                querySelectorAll
            2-  修改dom内容
                    表单元素 
                        设置输入框的内容 （textarea）input.value = '222'
                        获取输入框的内容  input.value
                    元素的内容  
                            div.innerHTML（双标签）  获取或者设置标签的内容（可以识别HTML代码）
                            div.innerText （双标签） 获取或者设置标签的内容（可以不识别HTML代码）
            给元素的内容添加点击事件
                1-行内的js  <button onclick="fn()"></button>
                  js代码中定义这个函数 function(){}

                2-  btn.onclick = function(){}    
                    用户点击按钮--后面的函数就会执行


           报错
             // Cannot set properties of null (setting 'value')
            // 不能设置null的value属性
            js写到页面结构的上面--导致js获取不到dom元素-
                
            
            
            3-  修改dom样式
                dom.style.color ='aaa'
                dom.style.backgroundColor ='aaa'


            4-  修改dom属性
                ipt.value
                dom.innerHTML
                dom.innerText
                dom.style

             所有我们之前学的htm标签的属性 都可以在dom对象里面的使用

            
        
        */
        var username = 'zhangsan';
        //获取username这个输入框
        var usernameIpt = document.querySelector('#username');
        // 设置输入框内容

        // Cannot set properties of null (setting 'value')
        // 不能设置null的value属性
        console.log(usernameIpt);//null-- js写到页面结构的上面--导致js获取部到dom元素
        usernameIpt.value = username


        function fn() {
            console.log('点击了按钮');
            // 获取 age输入框-  输入框的值，判断
            var ageIpt = document.querySelector('#age');
            console.log(ageIpt.value);
            console.log(typeof ageIpt.value);

            //输入框的值转为数字
            var num = Number(ageIpt.value);
            console.log(num);
            // 判断 num 变量的值 是否是一个数字 
            console.log(NaN === NaN);//false
            // 怎么变量是否NaN （NaN 和自身不等）
            // isNaN(参数)-返回true 或者false 判断是否为NaN
            if (isNaN(num) === true) {
                console.log('不是数字');
            } else {
                console.log('是数字');
            }
        }

        var btn2 = document.querySelector('#btn2');
        // 给按钮2添加了一点击事件，用户点击了按钮2 后面的函数就会执行
        btn2.onclick = function () {
            console.log('点击了按钮2');
            var ipt = document.querySelector('#age')
            var num = Number(ipt.value);
            var resSpan = document.querySelector('#res');
            if (num % 2 == 0) {
                console.log('偶数');
                // 设置span的内容
                // resSpan.innerHTML = '偶数'
                // resSpan.innerHTML = '<h2>偶数</h2>'
                resSpan.innerText = '<h2>偶数</h2>'
                // resSpan.innerText = '偶数'

            } else {
                console.log('奇数');
                // resSpan.innerHTML = '奇数'
                resSpan.innerText = '奇数'

            }
        }


    </script>


</body>

</html>